<template>
    <div>
      <h1>修改会员信息</h1>
      <table class="table">
        <tbody>
            <tr>
                <td>会员编号</td>
                <td>{{ data.id }}</td>
            </tr>
          <tr>
            <td>会员名</td>
            <td>
              <input type="text" v-model="data.name" />
            </td>
          </tr>
          <tr>
            <td>密码</td>
            <td>
              <input type="password" v-model="data.password" />
            </td>
          </tr>
          <tr>
            <td>会员头像</td>
            <td>
              <input type="file" @change="upload" />
              <img :src="'https://localhost:7114'+data.img" style="width: 100px;height: 100px;" /> 
            </td>
          </tr>
          <tr>
            <td>性别</td>
            <td>
              <input type="radio" :value="true" v-model="data.sex" />男
              <input type="radio" :value="false" v-model="data.sex" />女
            </td>
          </tr>
          <tr>
            <td>爱好</td>
            <td>
              <span v-for="h in hobby">
                  <input type="checkbox" v-model="hobbydata" :value="h" />{{ h }} 
              </span>
            </td>
          </tr>
          <tr>
            <td>会员等级</td>
            <td>
              <select v-model="data.memberLevelId">
               <option value="0">请选择</option>
              <option v-for="x in xldata" :value="x.id">{{ x.names }}</option>
           </select>
            </td>
          </tr>
          <tr>
              <td>
                  <input type="button" value="修改" @click="upd" />
                  <a href="/">返回列表</a>
              </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script setup lang="ts">
  
  import { ref,onMounted } from 'vue';
  import { useMemberStore } from '@/stores/member';
  import { useRouter,useRoute } from 'vue-router';
  import axios from 'axios';
  
  const router=useRouter()
  const route=useRoute()
  const users = useMemberStore()
  
  onMounted(()=>{
      getuser()
      xlk()
      ft()
  })
  
  const xldata=ref([{
      "id": 1,
      "names": "普通会员"
    }])
  
  const xlk=()=>{
      axios.get("https://localhost:7114/api/Lev",{params:xldata.value}).then(res=>{
          xldata.value=res.data
      })
  }
  
  const getuser=()=>{
      if(users.member.state==false){
          alert('用户未登录,请登录后再试')
          router.push({path:"/login"})
      }
  }
  
  const hobby=ref(["游戏","足球","篮球","羽毛球"])
  const hobbydata=ref([])
  

  const ft=()=>{
      var x = route.query.id
      axios.get("https://localhost:7114/api/Member/GetMember",{params:{id:x}}).then(res=>{
         data.value=res.data
         hobbydata.value=data.value.houbbyString.split(',')
      })
  }
  
  const data = ref({
    "id": 0,
    "name": "",
    "password": "",
    "sex": true,
    "houbbyCount": 0,
    "houbbyString": "",
    "isDelete": true,
    "img": "string",
    "memberLevelId": 0,
    "createData": "2025-04-10T11:44:21.229Z"
  })
  
  const upd=()=>{
      data.value.houbbyString=hobbydata.value.toString()
      data.value.houbbyCount=hobbydata.value.length
      axios.put("https://localhost:7114/api/Member/UpdMember",data.value).then(res=>{
          if(res.data>0){
              alert('修改成功')
              router.push({path:"/"})
          }
          else{
              alert('修改失败')
          }
      })
  }
  
  const upload=(e:any)=>{
     var f = e.target.files[0]
     var fd = new FormData()
     fd.append("file",f)
     if(f.size>1024*1024*2){
    alert('图片大小不能超过2MB')
    return;
   }
   if(f.type!='image/jpeg'&&f.type!='image/png'){
    alert('图片格式只能为JPG|PNG')
    return;
   }
     axios.post("https://localhost:7114/api/UpLoad",fd).then(res=>{
            data.value.img=res.data
     })
  }
  
  </script>
  
  <style scoped></style>
  
